<template>
	<view class="container">
		<view class="box"v-for="(item, index) in list" :key="index">
			<view class="uni-inline-item hd">
				<image mode="aspectFill" :src="item.headImgUrl"></image>
				<view class="uni-flex-item">
					<view class="h3">{{item.userName}}</view>
					<view class="txt">{{item.createTime}}</view>
				</view>
				<view class="focusBtn" @click="shareVideo">分享</view>
			</view>
			<view class="bd">
				<view class="p">{{item.shareContent}}</view>
				<view class="video">
					<video :src="item.videoUrl"></video>
					<!-- <image mode="widthFix" src="@/static/images/pro_13.png"></image>
					<image mode="widthFix" src="@/static/images/pro_15.png" class="pic"></image> -->
				</view>
			</view>
			<view class="ft">
				<image mode="widthFix" src="@/static/images/ly.png"></image>
				<text>297</text>
				<view class="jichu">
					<image class="collection" mode="widthFix" src="@/static/images/zan.png" v-show="showUpImg"
						@click="changeImg"></image>
					<image class="collection" mode="widthFix" src="@/static/images/zan_on.png" v-show="!showUpImg"
						@click="changeImg"></image>
				</view>
				<text>936</text>
			</view>
		</view>
		
		<!-- <view class="bottom">发布</view> -->
	</view>
</template>


<script>
	export default {
		data() {
			return {
				showUpImg: true,
				showUpImg1: true,
				list: []
			}

		},
		
		onLoad() {
			this.getShareList();
		},
		
		onShow() {
			
		},

		methods: {
			
			changeImg: function() {
				this.showUpImg = !this.showUpImg
			},
			
			changeImg1: function() {
				this.showUpImg1 = !this.showUpImg1
			},

			/**
			 * 获取车型分享案例
			 */
			getShareList() {
				let that = this;
				that.$request.get('share/getShareList', {
					userId: that.$store.state.app.uid
				}).then(res => {
					that.list = res.value.list
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},
		}
	}
</script>

<style>
	page {
		background: #F3F3F3;
	}

	.container {
		padding: 30rpx;
	}

	.container .box {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.container .hd {
		padding: 30rpx 0;
	}

	.container .hd .h3 {
		font-weight: bold;
	}

	.container .hd .txt {
		color: #666666;
		font-size: 22rpx;
	}

	.container .hd button {
		font-size: 24rpx;
		background: #F3F3F3;
		border-radius: 50rpx;
		border: none;
	}

	.container .hd image {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.container .bd .p {
		padding: 0 0 20rpx;
	}

	.container .video {
		position: relative;
		height: 360rpx;
	}
	
	.container .video video {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	.container .video .pic {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 72rpx;
		height: 72rpx;
	}

	.container .ft {
		text-align: right;
		padding: 20rpx 30rpx;
		color: #979797;
	}

	.container .ft image {
		width: 32rpx;height: 32rpx;
		margin: -3px 5px 0 30rpx;
	}

	.bottom {
		position: fixed;
		right: 40rpx;
		bottom: 200rpx;
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		z-index: 99;
		border-radius: 50%;
		background: #06A972;
		box-shadow: 0px 3px 6px 1px rgba(6, 169, 114, 0.16);
	}
	.jichu{display: inline-block;}
</style>
